<!--
 * @Author: zhangxiangsheng 1026583651@qq.com
 * @Date: 2024-04-10 13:44:29
 * @LastEditors: zhangxiangsheng 1026583651@qq.com
 * @LastEditTime: 2024-04-25 16:45:31
 * @FilePath: \crm\pagesecharts\index\components2\card4.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <view class="card">
    <view class="title u-flex u-flex-between">
      <view class="u-flex">
        <u--image
          :src="$z.imgsrc('jian4.png')"
          width="36rpx"
          height="36rpx"
        ></u--image>
        <view class="text">销售情况</view>
      </view>

      <!-- <u-icon name="arrow-right" size="12" color="#999999"></u-icon> -->
    </view>
    <view class="list">
      <view class="item u-flex" v-for="(item, index) in list" :key="index">
        <view class="l">
          <view class="text1">{{ item.text1 }}</view>
          <view class="text2">
            {{ item.text2 }}
            <text class="bi">笔</text>
          </view>
        </view>
        <view class="r">
          <view class="t u-flex u-flex-between">
            <view class="text2" style="font-size: 24rpx">
              <text class="dqje">当前金额</text>
              ¥{{ item.text3 }}
            </view>
            <view class="text1">目标金额 ¥{{ item.text4 }}</view>
          </view>
          <view class="jdtbj">
            <div class="jdt" :style="[item.customStyle]"></div>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          text1: "初步接洽",
          text2: "283746",
          text3: "283746",
          text4: "52637.23",
          customStyle: {
            width: "50%",
            background: "rgba(97, 2, 231, 1)",
          },
        },
        {
          text1: "需求确定",
          text2: "283746",
          text3: "283746",
          text4: "52637.23",
          customStyle: {
            width: "40%",
            background: "rgba(49, 87, 251, 1)",
          },
        },
        {
          text1: "方案报价",
          text2: "283746",
          text3: "283746",
          text4: "52637.23",
          customStyle: {
            width: "70%",
            background: "rgba(63, 136, 255, 1)",
          },
        },
        {
          text1: "谈判合同",
          text2: "283746",
          text3: "283746",
          text4: "52637.23",
          customStyle: {
            width: "20%",
            background: "rgba(0, 216, 186, 1)",
          },
        },
        {
          text1: "赢单",
          text2: "283746",
          text3: "283746",
          text4: "52637.23",
          customStyle: {
            width: "60%",
            background: "rgba(136, 211, 0, 1)",
          },
        },
      ],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {},
  },
};
</script>
<style lang="scss" scoped>
.card {
  margin: 14rpx 18rpx;
  background-color: #fff;
  border-radius: 8rpx;
  padding-bottom: 24rpx;

  // padding: 0 24rpx;
  // padding-bottom: 16rpx;
  .title {
    font-size: 28rpx;
    font-weight: bold;
    height: 88rpx;
    padding: 0 24rpx;

    .text {
      padding-left: 12rpx;
      line-height: 1;
    }
  }

  .text1 {
    color: rgba(131, 133, 137, 1);
    font-size: 24rpx;
  }

  .text2 {
    color: rgba(23, 26, 29, 1);
    font-size: 28rpx;
    font-weight: bold;
    display: flex;
    align-items: center;
    line-height: 1;
    .bi {
      font-weight: lighter;
      color: #838589;
      padding-left: 10rpx;
      font-size: 22rpx;
    }
    .dqje {
      font-weight: lighter;
      font-size: 20rpx;
      color: #838589;
      padding-right: 10rpx;
    }
  }

  .list {
    // display: flex;
    // flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 24rpx;

    .item {
      height: 100rpx;
      display: flex;
      padding: 12rpx 0;

      .l {
        width: 200rpx;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .text1 {
        }
      }

      .r {
        width: 0;
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .jdtbj {
          width: 100%;
          height: 20rpx;

          background-color: rgba(247, 248, 248, 1);
          border-radius: 10rpx;
          position: relative;
          top: -4rpx;
          .jdt {
            position: absolute;
            width: 0%;
            height: 20rpx;
            // background-color: red;
            border-radius: 10rpx;
            left: 0;
          }
        }
      }
    }
  }
}
</style>
